<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>结算</title>
    <link rel="stylesheet" type="text/css"  href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}" />
    <link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}"/>

    <style type="text/css">
        .form-control{
            width: 100%;
        }
    </style>
</head>
<body>
<!--导航部分  begin-->
<div th:replace="common/header :: header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel :: carousel"></div>
<!--最顶端轮播图片 end-->

<!--购物车 begin-->
<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
            </li>
        </ol>

        <!--送货地址  begin-->
        <div style="margin-bottom: 5px;" id="addrDiv">
            <ul class="list-group" id="address">
                <li th:if="${not #lists.isEmpty(addressList)}" th:each="address:${addressList}" class="list-group-item">
                    <input type="radio" name="addr" th:value="${address.id}" th:text="${address.province} + ${address.city} + ${address.area} + ${address.detailAddress}">&nbsp;
                </li>
                <li class="list-group-item" th:if="${#lists.isEmpty(addressList)}">暂无收货地址！</li>

                <!--<li class="list-group-item"><input type="radio" name="addr">&nbsp;江苏省苏州市金阊区烽火路82号 天创大厦1层</li>-->
                <!--<li class="list-group-item"><input type="radio" name="addr" checked>&nbsp;江苏省苏州市金阊区烽火路83号 天创大厦2层 &nbsp;<span class="text-success">默认地址</span></li>-->
            </ul>
            <a href="#" class="text-info" onclick="dispalyMoreAddr(this)">更多地址↓&nbsp;&nbsp;</a>
            <a href="javascript:void(0)" id="addAddr" class="text-success" data-toggle="modal" data-target="#addrModal">添加新地址</a>
        </div>
        <hr>


        <!--添加新地址模态框 begin-->
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="addrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">
                            <span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;添加新收货地址
                        </h4>
                    </div>
                    <div class="modal-body">
                        <!--登录的form表单-->
                        <form action="#" id="addressForm" class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>

                                <div data-toggle="distpicker">
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="province1">Province</label>
                                        <select class="form-control" id="province1" name="province"></select>
                                    </div>
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="city1">City</label>
                                        <select class="form-control" id="city1" name="city"></select>
                                    </div>
                                    <div class="form-group col-sm-12 col-md-3">
                                        <label class="sr-only" for="district1">District</label>
                                        <select class="form-control" id="district1" name="area"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group has-feedback" style="clear:both">
                                <label class="col-sm-2 control-label">详细地址:</label>
                                <div class="col-sm-5">
                                    <textarea class="form-control" id="deatails" name="detailAddress"></textarea>
                                </div>

                            </div>
                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">邮政编码</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" id="lastname2" name="emailCode" placeholder="邮政编码">
                                    <span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="username" name="receiver" placeholder="收货人姓名">
                                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-5">
                                    <input type="tel" class="form-control" id="tel" name="tel" placeholder="合法手机格式">
                                    <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="setDefaultAddr" name="isDefault"><span class="text-success">设置默认地址</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <input type="button" class="btn btn-primary" value="提交地址" th:onclick="saveAddress()">
                            </div>
                        </form>
                        <!--form结束-->
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <!--左边-->
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;结算清单</a>
            </li>
        </ol>

        <!--确认订单列表 begin-->
        <div class="table-responsive" id="imgDiv">
            <table class="table table-hover table-striped" style="vertical-align:middle;">
                <thead>
                <tr class="text-success success">
                    <th id="sequence">序号</th>
                    <th>图片</th>
                    <th>书名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>合计</th>
                </tr>
                </thead>
                <tbody id="tby">
                <tr th:each="cart,iter:${list}">
                    <td th:text="${cart.bookId}">1001</td>
                    <td><img src="images/tenxunchuan.jpg" th:src="@{'/public/' + ${cart.imgUrl}}"></td>
                    <td th:text="${cart.bookName}">腾讯传</td>
                    <td th:text="${cart.newPrice + '元'}">35.0元</td>
                    <td th:text="${cart.count}">10</td>
                    <td th:text="${cart.newPrice * cart.count}" th:id="${'cartPrice' + iter.index}">100$</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="4"></td>
                    <td class="text-success">总价:</td>
                    <td class="text-success" th:text="${session.userCartInfo.totalPrice}">345$:</td>
                </tr>
                <tr style="background-color: white;">
                    <td>
                        <a href="index.html" th:href="@{/book/index}" class="btn btn-info">&lt;&lt;继续购买</a>
                    </td>
                    <td colspan="4"></td>
                    <td>
                        <a href="javascript:void(0)" th:onclick="pay()" class="btn btn-warning">已支付</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <!--确认订单列表 end-->

    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
            </li>
            <li>
                <a href="# " th:text="${session.userCartInfo.num + '个商品'}">3个商品</a>
            </li>
            <li>
                <a href="# " th:text="${'总价' + session.userCartInfo.totalPrice + '元'}" id="total">总价100元</a>
            </li>
        </ol>

        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="wow fadeInRight animated">
                    <div class="thumbnail">
                        <a href="details.html"><img src="images/dongjian.jpg " th:src="@{/images/dongjian.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>洞见</h3>
                        </div>
                    </div>
                </div>
                <div class="wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/tenxunchuan.jpg" th:src="@{/images/tenxunchuan.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>腾讯传</h3>
                        </div>
                    </div>
                </div>
                <div class="wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a href="details.html"><img src="images/taikong.jpg" th:src="@{/images/taikong.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>太空</h3>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="pager">
                        <li>
                            <a href="#" onclick="pageUp() ">&larr;上一页</a>
                            <a href="#" onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--喜欢end-->
    </div>
<!--首页底部信息 begin-->
<div th:replace="common/footer :: footer"></div>

</body>
</html>

<img src="../static/images/wepay.jpg" th:src="@{/images/wepay.jpg}" class="wepay">